<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.red{color:red;}
		.thin{font-weight: 200;}
		.italic{font-style:italic;}
		.active{letter-spacing: 0.5em;}
	</style>
</head>
<body>
<div v-cloak id="app">
	<h1 :class="['red', 'italic']">这是一个很大很大的H1,大到你无法想象！！！</h1>
	<h1 :class="['red', 'italic', flag?'active':'']">这是一个很大很大的H1,大到你无法想象！！！</h1>
	<h1 :class="['red', 'italic', {active:flag}]">这是一个很大很大的H1,大到你无法想象！！！</h1>
	<h1 :class="classObj">这是一个很大很大的H1,大到你无法想象！！！</h1>
</div>	
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
	el : '#app',
	data : {
		msg : 'hello',
		flag:true,
		option:'+',
		classObj:{red:true, italic:false, active:true, thin:true}
	}
})
</script>
</body>
</html>